<template>
  <div class="layout">
    <Layout :style="{ minHeight: '100vh' }">
      <Sider class="sidebar">
        <div class="title-box">
          <div class="logo">logo</div>
          <span>七尾医疗服务后台</span>
        </div>
        <Menu active-name="1" theme="light" width="auto" class="sidebar-menu" accordion>
          <MenuItem to="/home/index" name="1">
            <Icon type="md-home" size="20" />
            <span>首页</span>
          </MenuItem>
          <Submenu name="2" to="/home/register">
            <template #title>
              <Icon type="ios-archive" size="20" />
              预约管理
            </template>
            <MenuItem name="2-1" to="/home/register">预约挂号</MenuItem>
            <MenuItem name="2-2" to="/home/nucleic">预约核酸检测</MenuItem>
            <MenuItem name="2-3" to="/home/yytj">预约体检</MenuItem>
            <MenuItem name="2-4" to="/home/arrange">医生排班</MenuItem>
          </Submenu>
          <Submenu name="3" to="/home/mzxfjl">
            <template #title>
              <Icon type="ios-paper" size="20" />
              费用管理
            </template>
            <MenuItem name="3-1" to="/home/mzxfjl">门诊消费记录</MenuItem>
            <MenuItem name="3-2" to="/home/mzczjl">门诊充值记录</MenuItem>
            <MenuItem name="3-3" to="/home/zyczjl">住院充值记录</MenuItem>
            <MenuItem name="3-4" to="/home/zyxfjl">住院消费记录</MenuItem>
            <MenuItem name="3-5" to="/home/tkjl">退款记录</MenuItem>
          </Submenu>
          <Submenu name="4" to="/home/doctor">
            <template #title>
              <Icon type="md-pin" size="20" />
              医院管理
            </template>
            <MenuItem name="4-1" to="/home/doctor">医生管理</MenuItem>
            <MenuItem name="4-2" to="/home/department">科室管理</MenuItem>
            <MenuItem name="4-3" to="/home/physical">体检套餐管理</MenuItem>
            <MenuItem name="4-4" to="/home/health">健康百科</MenuItem>
            <MenuItem name="4-5" to="/home/guidelines">就诊指南</MenuItem>
            <MenuItem name="4-6" to="/home/navigation">医院导航</MenuItem>
            <MenuItem name="4-7" to="/home/jianJie">医院介绍</MenuItem>
            <MenuItem name="4-8" to="/home/scheduling">预约须知</MenuItem>
          </Submenu>
          <Submenu name="5" to="/home/administrator">
            <template #title>
              <Icon type="md-settings" size="20" />
              系统设置
            </template>
            <MenuItem name="5-1" to="/home/administrator">管理员管理</MenuItem>
            <MenuItem name="5-2" to="/home/role">角色管理</MenuItem>
            <MenuItem name="5-3" to="/home/jobTitle">职称管理</MenuItem>
            <MenuItem name="5-4" to="/home/newsBulletin">消息公告</MenuItem>
            <MenuItem name="5-5" to="/home/password">修改密码</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{ background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)' }">
          <div class="user-box">
            <div class="logo avater">
              <img src="@/assets/logo.svg" alt="" />
            </div>
            <span>Sam</span>
          </div>
        </Header>
        <router-view></router-view>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import router from '../router/index'
</script>

<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.sidebar,
.sidebar-menu {
  background: rgb(84, 175, 250);
}
.title-box,
.user-box {
  padding: 20px 0;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    border-radius: 50%;
    background: #fff;
    color: rgb(84, 175, 250);
    line-height: 40px;
    text-align: center;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  span {
    font-size: 18px;
  }
}
.user-box {
  color: black;
  padding: 0;
  justify-content: flex-end;
}
.ivu-menu,
.ivu-menu-item {
  color: #fff;
  font-size: 16px;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
  color: #fff;
}
.menu-item i {
  transform: translateX(0px);
  transition:
    font-size 0.2s ease,
    transform 0.2s ease;
  vertical-align: middle;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition:
    font-size 0.2s ease 0.2s,
    transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.dev-run-preview .dev-run-preview-edit {
  display: none;
}
</style>
